<template>
  <div class="out-container">
    <el-card class="content-body app-container">
      <div slot="header">
        <div style="text-align: right;">
          <el-button size="mini" type="primary" @click="handleEdit">新增</el-button>
        </div>
      </div>
      <div class="card-padding">
        <vxe-grid ref="xTable" v-bind="gridOptions">
          <template #operate="{ row }">
            <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" style="color:red;" @click="handleRemove(row)">删除</el-button>
          </template>
          <template #empty>
            <span style="color: #1BA1C2;">
              空
            </span>
          </template>
        </vxe-grid>
      </div>
    </el-card>
    <!-- 添加或修改菜单对话框 -->
    <edit ref="edit" :menu-options="menuOptions" @fetch-data="fetchData" />
  </div>
</template>
<script>
import { getSysMenu, delSysMenu } from '@/api/system/menu'
import Edit from './components/MenuEdit'
const mainDirectoryId = 0
export default {
  components: { Edit },
  data() {
    const self = this
    return {
      title: '菜单分配列表',
      selectRows: '',
      gridOptions: {
        size: 'small',
        headerAlign: 'center',
        border: 'inner', // default full outer inner none
        resizable: true,
        showOverflow: true,
        headerRowStyle: { backgroundColor: 'rgba(217, 223, 235, 0.2)' },
        height: self.$baseTableHeight(-80),
        showHeaderOverflow: 'tooltip',
        align: 'center',
        treeConfig: {
          id: 'id'
        },
        columns: [
          { title: '菜单名称', field: 'title', minWidth: '130', treeNode: true },
          { title: '组件名称', field: 'name', minWidth: '140' },
          { title: '权限标识', field: 'perm', minWidth: '120' },
          { title: '菜单类型', field: 'menuType', minWidth: '80',
            formatter: ({ cellValue }) => {
              if (cellValue === 'M') {
                return '目录'
              } else if (cellValue === 'F') {
                return '按钮'
              } else {
                return '菜单'
              }
            }
          },
          { title: '图标', field: 'icon', minWidth: '100' },
          { title: '路由', field: 'path', minWidth: '140' },
          { title: '组件', field: 'component', minWidth: '140' },
          { title: '重定向', field: 'redirect', minWidth: '140' },
          { title: '是否启用', field: 'enbale', minWidth: '100',
            formatter: ({ cellValue }) => {
              if (cellValue === '0') {
                return '禁用'
              } else {
                return '启用'
              }
            }
          },
          { title: '备注', field: 'remark', minWidth: '100' },
          { title: '操作', minWidth: 150, fixed: 'right', slots: { default: 'operate' }}
        ],
        data: []
      },
      // 菜单树选项
      menuOptions: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getSysMenu().then((res) => {
        this.gridOptions.data = res.data
        this.menuOptions = []
        // const menu = { id: mainDirectoryId, title: '主目录', children: [] }
        const menu = { id: mainDirectoryId, title: '主目录', children: [] }
        menu.children = res.data
        this.menuOptions.push(menu)
      })
    },
    handleEdit(row) {
      if (row?.id) {
        this.$refs['edit'].showEdit(row)
      } else {
        this.$refs['edit'].showEdit()
      }
    },
    /* 删除*/
    handleRemove(row) {
      if (row.id) {
        this.$baseConfirm('此操作将彻底删除菜单, 是否继续?', null, async() => {
          /* 异步操作*/
          await delSysMenu(row.id)
          this.$baseMessage.success('删除成功')
          this.fetchData()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content-body {
  position: relative;
}
.footer {
  height: 40px;
  overflow: hidden;
  .pagination-container {
    padding: 0;
  }
}
::v-deep .el-table__fixed-right-patch {
  background-color: #DFE1E1;
  top:0;
}
</style>
